<template>
  <div>
    <Card class="card clear-float">
      <p class="card-title" slot="title">{{$t('olBJNCqqHzscAwa40QCZ9')}}</p>
      <div class="wrap-operate-container">
        <div class="wrap-operate-area">
          <div class="operate-select-item">
            <label class="title">{{$t('ExW9CWuHRZ8QJUUibOR0l')}}:</label>
            <div class="content">
              <Select
                v-model="payType"
                style="width: 200px"
                @on-change="changeStationName"
              >
                <Option
                  v-for="item in payTypes"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </Option>
              </Select>
            </div>
          </div>
          <div class="operate-input-item">
            <Input
              v-model="cellPhoneAccount"
              @on-enter="searchCellPhoneAccount"
            >
              <span slot="prepend">{{$t('ggdgmNf2iQVSf4KyNPz6e')}}：</span>
              <Button
                slot="append"
                icon="ios-search"
                @click="searchCellPhoneAccount"
              ></Button>
            </Input>
          </div>
          <div class="operate-select-item">
            <label class="title">{{$t('SWJNpRnfSDK7MAg0omTmr')}}:</label>
            <div class="content">
              <Select
                v-model="stationName"
                style="width: 200px"
                @on-change="changeStationName"
              >
                <Option
                  v-for="item in stations"
                  :key="item.id"
                  :value="item.id"
                >
                  {{ item.name }}
                </Option>
              </Select>
            </div>
          </div>
          <div class="operate-input-item">
            <Input v-model="icNumber" @on-enter="searchICNumber">
              <span slot="prepend">{{$t('rCioHLIJbqQPT_GD6hOEZ')}}：</span>
              <Button
                slot="append"
                icon="ios-search"
                @click="searchICNumber"
              ></Button>
            </Input>
          </div>
          <div class="operate-timepicker-item">
            <label class="title">{{$t('iezrwIPqa_uDAOgw9K85J')}}:</label>
            <div class="content">
              <DatePicker
                v-model="timescope"
                type="datetimerange"
                format="yyyy-MM-dd HH:mm:ss"
                :placeholder="$t('4yP5zHObfE9vFzhk3a6yk')"
                style="width: 300px"
              ></DatePicker>
            </div>
          </div>
          <div class="operate-btn-item">
            <Button class="item" type="info" icon="ios-search" @click="query"
              >{{$t('9ZYL6riI1fheWqEf_uo-M')}}</Button
            >
            <Button
              class="item"
              type="info"
              icon="ios-card"
              @click="exportExcel"
              >{{$t('ssHl1qTS2oMuNp3RZnkQY')}}</Button
            >
          </div>
          <div class="operate-text-item">
            <label class="title">{{$t('e8KwOuNiUqXvNudpUS_Pt')}}：</label>
            <span class="content">{{ totalPayMoney }} {{$t('rEwoS7D6EkR6EPGHSq6MU')}}</span>
          </div>
        </div>
      </div>
      <Table :loading="loading" :columns="columns" :data="data"></Table>
    </Card>
  </div>
</template>

<script>
import moment from 'moment'
import { getStationInfo } from '@/api/data2'
export default {
  name: 'deal_history',
  data () {
    return {
      cellPhoneAccount: '',
      stationName: '',
      stations: [],
      icNumber: '',
      loading: false,
      totalPayMoney: '0.00',
      columns: [
        {
          type: 'index',
          width: 60,
          align: 'center'
        },
        {
          title: this.$t('SWJNpRnfSDK7MAg0omTmr'),
          key: 'stationName'
        },
        {
          title: this.$t('xz5AFl8ygS2V-v13rJdPJ'),
          key: 'customerName'
        },
        {
          title: this.$t('rCioHLIJbqQPT_GD6hOEZ'),
          key: 'icNumber'
        },
        {
          title: this.$t('56vXCivLJ43HZO4QrXiG-'),
          key: 'cardOwner'
        },
        {
          title: this.$t('gz_QQq9UDq7aHpTYuWYhK'),
          key: 'chargeBeforeMoney'
        },
        {
          title: this.$t('CjyPse9XVaZNs8kCThSuS'),
          key: 'chargeAfterMoney'
        },
        {
          title: this.$t('ggdgmNf2iQVSf4KyNPz6e'),
          key: 'cellPhoneAccount'
        },
        {
          title: this.$t('8x1ei6NmeD_aDJcuqqXVg'),
          key: 'payTime'
        },
        {
          title: this.$t('e8KwOuNiUqXvNudpUS_Pt'),
          key: 'totalPayMoney'
        },
        {
          title: this.$t('okDLL2oofkPEr91R88ehJ'),
          key: 'chargePay'
        },
        {
          title: this.$t('RcdKe3ZVABRc5kCWTZKqi'),
          key: 'servicePay'
        },
        {
          title: this.$t('Wy7zkldbVHvPqBc_rYcGA'),
          key: 'parkingPay'
        },
        {
          title: this.$t('sgO8XTrpDs0hVu2JOZPmp'),
          key: 'chargeKW'
        },
        {
          title: this.$t('NY85mD0qnTrBo6msK_Y8B'),
          key: 'chargeTime'
        },
        {
          title: this.$t('Lf-NYrmhdsbXhz01WSc0t'),
          key: 'ssoc'
        },
        {
          title: this.$t('gVEmdwEv_0fuY-9gmwNS-'),
          key: 'esoc'
        },
        {
          title: this.$t('iezrwIPqa_uDAOgw9K85J'),
          key: 'startChargeTime'
        },
        {
          title: this.$t('-ff9FAIRuHOIClpeqIfvZ'),
          key: 'endChargeTime'
        },
        {
          title: this.$t('R6icnM_rmTKpKyk7rtjeo'),
          key: 'orderNumber'
        }
      ],
      data: [],
      timescope: [moment(0, 'HH').toDate(), moment().toDate()]
    }
  },
  mounted () {},
  methods: {
    changeStationName () {},
    searchCellPhoneAccount () {},
    searchICNumber () {},
    query () {},
    exportExcel () {}
  }
}
</script>

<style></style>
